<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-01-16 14:24:53
 * @LastEditors: 'Chenfarry' '2925102113@qq.com'
 * @LastEditTime: 2024-04-01 10:28:16
 * @FilePath: \liuyanggui\src\cuselement-ui\cus-button\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <el-button :type="type" :disabled="disabled" :color="color" :size="size" :round="round" :plain="plain"
    @click="clickHandler" :text="text" :style="CssObj" v-throttle>
    <slot></slot>
  </el-button>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
import { useThrottleFn } from "@vueuse/core";
/**
 * @param  type       类型 primary'| 'success'| 'warning'| 'danger'| 'info'| 'text'(delete)
 * @param  disabled   按钮是否为禁用状态
 * @param  color      自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色
 * @param  size       尺寸 'large'| 'default'| 'small'
 * @param  round      是否为圆角按钮
 * @param  plain      是否为朴素按钮
 */
const props = defineProps({
  type: {
    type: [String],
    default: "",
  },
  disabled: {
    type: [Boolean],
    default: false,
  },
  color: {
    type: [String],
    default: "",
  },
  size: {
    type: [String],
    default: "default",
  },
  round: {
    type: [Boolean],
    default: false,
  },
  plain: {
    type: [Boolean],
    default: false,
  },
  text: {
    type: [Boolean],
    default: false,
  },
  CssObj: {
    type: [Object, String],
    default: {},
  },
});

const emits = defineEmits<{
  (event: "click"): void;
}>();
const clickHandler = useThrottleFn(() => {
  emits("click");
}, 1000);
</script>

<style lang="scss" scoped>
// ::v-deep .el-button{
//   cursor: pointer;
// }</style>